<template>
  <div :class="['main-view', { 'collapsed-sidebar': isCollapsed }]">
    <!-- 侧边栏 -->
    <el-aside width="200px" :class="{ 'is-collapsed': isCollapsed }" class="sidebar">
      <div class="sidebar-content">
        <div class="sidebar-header">
          <el-avatar icon="el-icon-s-home" class="sidebar-logo"></el-avatar>
          <span v-if="!isCollapsed">管理系统</span>
        </div>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="handleSelect"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>殡仪管理</span>
            </template>
            <el-submenu index="1-1">
              <template slot="title">
                <i class="el-icon-truck"></i>
                <span>灵车管理</span>
              </template>
              <el-menu-item index="/funeral-management/car-status"><i class="el-icon-circle-check"></i>灵车状态</el-menu-item>
              <el-menu-item index="/funeral-management/car-scheduling"><i class="el-icon-date"></i>灵车排期</el-menu-item>
            </el-submenu>
            <el-menu-item index="/funeral-management/device-status"><i class="el-icon-monitor"></i>尸体保存设备管理</el-menu-item>
            <el-submenu index="1-2">
              <template slot="title">
                <i class="el-icon-collection"></i>
                <span>火葬设备管理</span>
              </template>
              <el-menu-item index="/funeral-management/current-device-status"><i class="el-icon-video-camera"></i>当前设备状态</el-menu-item>
              <el-menu-item index="/funeral-management/cremation-scheduling"><i class="el-icon-collection-tag"></i>火葬排期</el-menu-item>
            </el-submenu>
            <el-submenu index="1-3">
              <template slot="title">
                <i class="el-icon-s-flag"></i>
                <span>殡仪服务</span>
              </template>
              <el-menu-item index="/funeral-management/package-configuration"><i class="el-icon-tickets"></i>套餐配置</el-menu-item>
              <el-menu-item index="/funeral-management/price-management"><i class="el-icon-price-tag"></i>价格管理</el-menu-item>
              <el-menu-item index="/funeral-management/evaluation-management"><i class="el-icon-star-off"></i>评价管理</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-finance"></i>
              <span>财务管理</span>
            </template>
            <el-menu-item index="/financial-management/fee-records"><i class="el-icon-document"></i>费用收取和支付记录</el-menu-item>
            <el-menu-item index="/financial-management/financial-reports"><i class="el-icon-data-analysis"></i>财务报表</el-menu-item>
            <el-menu-item index="/financial-management/fee-reminders"><i class="el-icon-alarm-clock"></i>费用提醒和催缴</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-shop"></i>
              <span>增值管理</span>
            </template>
            <el-menu-item index="/value-added-management/inventory-management"><i class="el-icon-box"></i>售卖产品库存管理</el-menu-item>
            <el-menu-item index="/value-added-management/white-event-configuration"><i class="el-icon-suitcase-1"></i>白事/超度配置管理</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-cooperation"></i>
              <span>客户/合作方管理</span>
            </template>
            <el-menu-item index="/customer-partner-management/customer-information"><i class="el-icon-user"></i>客户信息管理</el-menu-item>
            <el-menu-item index="/customer-partner-management/partner-information"><i class="el-icon-phone"></i>合作方信息管理</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>人员管理</span>
            </template>
            <el-menu-item index="/personnel-management/permission-management"><i class="el-icon-lock"></i>权限管理</el-menu-item>
            <el-menu-item index="/personnel-management/information-management"><i class="el-icon-s-custom"></i>信息管理</el-menu-item>
            <el-menu-item index="/personnel-management/scheduling-management"><i class="el-icon-date"></i>排版管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </el-aside>

    <!-- 右侧内容 -->
    <el-container>
      <el-header>
        <!-- 顶部栏内容 -->
        <div class="header-content">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>当前页面</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="header-tools">
            <el-button icon="el-icon-menu" @click="toggleSidebar"></el-button>
            <el-button icon="el-icon-full-screen" @click="toggleFullScreen"></el-button>
            <el-button icon="el-icon-s-marketing" @click="navigateToDashboard"></el-button>
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-avatar icon="el-icon-user" class="avatar-icon"></el-avatar>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click="navigateToProfile">个人中心</el-dropdown-item>
                <el-dropdown-item>设置</el-dropdown-item>
                <el-dropdown-item @click="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false,
      activeIndex: '/'
    };
  },
  methods: {
    toggleSidebar() {
      this.isCollapsed = !this.isCollapsed;
    },
    handleSelect(key, keyPath) {
      this.$router.push(key).catch(err =>{
        if (err.name !== 'NavigationDuplicated'){
          throw err;
        }
      });
    },
    toggleFullScreen() {
      const doc = document.documentElement;
      if (!document.fullscreenElement) {
        doc.requestFullscreen();
      } else if (document.exitFullscreen) {
        document.exitFullscreen();
      }
    },
    navigateToDashboard() {
      this.$router.push('/dashboard').catch(err => {
        if(err.name !=='NavigationDuplicated') {
          throw err;
        }
      });
    },
    navigateToProfile() {
      this.$router.push('/profile').catch(err => {
        if(err.name !=='NavigationDuplicated') {
          throw err;
        };
      });
    },
    logout() {
      // 处理登出逻辑
    }
  }
};
</script>

<style scoped>
.main-view {
  display: flex;
  height: 100vh;
}
.el-aside {
  transition: width 0.2s;
}
.is-collapsed {
  width: 64px !important;
}
.sidebar {
  position: relative;
  overflow: hidden;
}
.sidebar-content {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
}
.sidebar-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.sidebar-header {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.sidebar-header .sidebar-logo {
  margin-right: 10px;
}
.el-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.el-header {
  background: #fff;
  line-height: 60px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.header-tools {
  display: flex;
  align-items: center;
}
.header-tools .el-button {
  margin-left: 10px;
}
.avatar-icon {
  margin-left: 20px;
}
.el-main {
  flex: 1;
  background: #f0f2f5;
  padding: 20px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border-right: 1px solid #ddd;
}
</style>
